<template>
	<view>
		<uni-nav-bar @clickLeft="goback" left-icon="left" fixed status-bar="true" :border="false" title="库存记录"></uni-nav-bar>
		<view class="block_top" :style="{top: safeTop}">
			<view class="flex_b its">
				<picker style="flex: 1;" mode="date" :value="date" @change="bindDateChange">
					<view class="uni-input">{{dateName}}</view>
				</picker>
				<uni-icons style="margin-left: 10rpx;" type="down"></uni-icons>
			</view>
			<view class="flex_b its">
				<picker style="flex: 1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" @cancel='clear' mode='selector' range-key='productName' :range="shopList"
					@change="bindShopChange" :value="isvalue">
					<view class="uni-input">{{shopName}}</view>
				</picker>
				<uni-icons style="margin-left: 10rpx;" type="down"></uni-icons>
			</view>
			<view class="flex_b its">
				<uni-data-select :clear="false" v-model="value" :localdata="range" @change="change"></uni-data-select>
			</view>
		</view>
		<view class="ulist">
			<view class="items" v-for="(item,index) in list" :key="index">
				<image :src="'/static/user/'+ item.changeCategory+'.png'" mode=""></image>
				<view class="item_r">
					<view class="flex_sp">
						<view class="b1">{{item.changeCategory}}</view>
						<view class="b1">{{item.changeCategoryType}}{{item.changeCount}}</view>
					</view>
					<view class="flex_sp" style="margin-top: 5rpx;">
						<view class="b2">{{item.productName}}</view>
						<view class="b2">剩余：{{item.count}}</view>
					</view>
					<view class="b2" style="margin-top: 5rpx;">
						<view class="">{{item.createTime}}</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 100rpx;"></view>
		</view>
		<view class="kong" v-if="nolist">
			<image src="/static/dkong.png" mode=""></image>
			<view class="ts">
				暂无记录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectProduct,
		merchantList
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				safeTop: uni.getStorageSync('statusBarHeight'),
				date: this.getDate(),
				dateName: '今天',
				range: [{
						value: '',
						text: "选择类别"
					}, {
						value: '人工减少',
						text: "人工减少"
					},
					{
						value: '人工增加',
						text: "人工增加"
					},
					{
						value: '售出',
						text: "售出"
					},
					{
						value: '退货',
						text: "退货"
					},
					{
						value: '系统清零',
						text: "系统清零"
					}
				],
				value: '',
				shopName: '选择商品',
				isvalue:0,
				shopList: [],
				params: {
					pageNum: 1,
					pageSize: 10,
					productId: "",
					changeCategory: "",
					createTimeBegin: this.getDate(), // 开始时间
					createTimeEnd: this.getDate() // 结束时间
				},
				list: [],
				nolist: false
			};
		},
		onLoad(option) {
			this.params.productId = option.id
			selectProduct({}).then(res => {
				this.shopList = res.data
				this.shopList.forEach((item,index)=>{
					if(item.id == this.params.productId){
						this.shopName = item.productName
						this.isvalue = index
					}
				})
			})
			this.getList()
		
		},
		onReachBottom() {
			this.params.pageNum++
			this.getList()
		},
		methods: {
			getList() {
				merchantList(this.params).then(res => {
					this.list.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
				})
			},
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`
			},
			getDatetype(nowtime) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate()
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				let t = `${year}-${month}-${day}`
				let tday = date.getDate() - 1
				tday = tday > 9 ? tday : '0' + tday;
				let twoday = `${year}-${month}-${tday}`
				if (nowtime == t) {
					return '今天'
				} else if (nowtime == twoday) {
					return '昨天'
				} else {
					return nowtime
				}
			},
			bindDateChange(e) {
				this.params.createTimeBegin = e.detail.value
				this.params.createTimeEnd = e.detail.value
				this.dateName = this.getDatetype(e.detail.value)
				this.list = []
				this.params.pageNum = 1
				this.getList()
			},
			bindShopChange(e) {
				this.params.productId = this.shopList[e.detail.value].id
				this.shopName = this.shopList[e.detail.value].productName
				this.list = []
				this.params.pageNum = 1
				this.getList()
			},
			clear(e) {
				console.log(e);
				this.isvalue = 0
				this.params.productId = ''
				this.shopName = '选择商品'
				this.list = []
				this.params.pageNum = 1
				this.getList()
			},
			change(e) {
				this.params.changeCategory = e
				this.list = []
				this.params.pageNum = 1
				this.getList()
			},
			goback(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.kong {
		margin: 200rpx auto;
		text-align: center;

		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #D1D1D6;
			margin-top: 30rpx;
		}

		image {
			width: 278rpx;
			height: 265rpx;
		}
	}

	.block_top {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: sticky;
		top: 0%;
		z-index: 9;
		padding: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.its {
			width: 30%;
		}

		.uni-input {
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}
	}
	.ulist{
		.items{
			width: 750rpx;
			height: 140rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			border-top: 1px solid #eee;
			image{
				width: 80rpx;
				height: 80rpx;
			}
			.item_r{
				flex: 1;
				margin-left:26rpx ;
				.b1{
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					line-height: 33rpx
				}
				.b2{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
				}
			}
		}
	}
</style>